<template>
    <div class="header">
      <h2>物联网金融系统
      <span>{{ state.UserName }}</span>
      <span>{{ state.UT_Name }}</span>
    </h2>
    <input type="button" value="退出" @click="back" />
    </div>
    <div class="main">
        <div class="left">
            <ul>
                <li>项目管理
                    <ol>
                        <li>投资管理
                            <ol>
                                <li @click="adminAddInvest">增加投资</li>
                                <li @click="adminInvestList">投资列表</li>
                            </ol>
                        </li>
                        <li>理财管理

                                    <ol>
                                        <li @click="adminAddFinance">增加理财</li>
                                        <li @click="adminFinanceList">理财列表</li>
                                    </ol>
                           
                        </li>
                        <li>借款管理
                            <ol>
                                <li @click="borrowAdd">增加借款</li>
                                <li @click="borrowList">借款列表</li>
                            </ol>
                        </li>
                    </ol>
                </li>
                <li>投资管理
                    <ol>
                        <li>投资项目列表
                            <ol>
                                <li @click="userInvestList">用户投资项目列表</li>
                                <li @click="adminnInvestList">管理员投资项目列表</li>
                            </ol>
                        </li>
                        <li>理财项目列表
                            <ol>
                                <li @click="userFinanceList">用户理财项目列表</li>
                                <li @click="adminFinanceItemList">管理员理财项目列表</li>
                            </ol>
                        </li>
                        <li>借款项目列表
                            <ol>
                                <li @click="userBorrowList">用户借款项目列表</li>
                                <li @click="adminBorrowList">管理员借款项目列表</li>
                            </ol>
                        </li>
                    </ol>
                </li>
                <li>资产管理
                    <ol>
                        <li>投资管理
                            <ol>
                                <li @click="userInvestRedeemList">用户赎回列表</li>
                                <li @click="adminInvestRedeemList">管理员赎回列表</li>
                            </ol>
                        </li>
                        <li>理财赎回</li>
                        <li>借款还款
                            <ol>
                                <li @click="userborrowRedeemList">用户还款列表</li>
                                <li @click="adminborrowRedeemList">管理员还款列表</li>
                            </ol>
                        </li>
                    </ol>
                </li>
            </ul>
        </div>
        <div class="right">
            <RouterView></RouterView>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter} from 'vue-router'
import {ref,reactive,toRefs,onMounted} from 'vue'
import axios from 'axios';
import {useUserStore} from '../store/User'
const useUserStores=useUserStore();
let router=useRouter();
const data:any=reactive({
    state:{

    }
})
let {state} =toRefs(data);
onMounted(()=>{
    Show()
})
const Show=()=>{
    axios({
        url:"/api/Users/GetUserinfo",
        method:'get',
        params:{
            uid:useUserStores.userInfo.U_Id
        }
    })
    .then(res=>{
        console.log(res);
        state.value=res.data.data[0];
    })
}
const back=()=>{
    useUserStores.userInfo={};
    router.push('/login');

}
//变量------------------
//函数------------------
const userFinanceList=()=>{
    //用户理财列表
    router.push('/main/userFinanceList');
}
const adminFinanceItemList=()=>{
    //管理员理财列表
    router.push('/main/adminFinanceItem');
}
const userborrowRedeemList=()=>{
    //用户还款列表
    router.push('/main/userborrowRedeemList');
}
const adminborrowRedeemList=()=>{
    //管理员还款列表
    router.push('/main/adminborrowRedeemList');
}
const userBorrowList=()=>{
    //用户借款列表
    router.push('/main/userBorrowList');
}
const adminBorrowList=()=>{
    //管理员借款列表
    router.push('/main/adminBorrowList');
}
const adminAddFinance=()=>{
    //管理员添加理财
    router.push('/main/adminAddFinance');
}
const adminFinanceList=()=>{
    //管理员理财列表
    router.push('/main/adminFinanceList');
}
const adminAddInvest=()=>{
    //管理员添加投资
    router.push('/main/adminAddInvest');
}
const adminInvestList=()=>{
    //管理员投资列表
    router.push('/main/adminInvestList');
}
const borrowAdd=()=>{
    //管理员添加投资
    router.push('/main/borrowAdd');
}
const borrowList=()=>{
    //管理员投资列表
    router.push('/main/borrowList');
}
const userInvestList=()=>{
    //用户投资项目列表
    router.push('/main/userInvestList');
}
const adminnInvestList=()=>{
    //管理员投资项目列表
    router.push('/main/adminnInvestList');
}
const userInvestRedeemList=()=>{
    //用户投资赎回
    router.push('/main/userInvestRedeemList');
}
const adminInvestRedeemList=()=>{
    //管理员投资赎回
    router.push('/main/adminInvestRedeemList');
}
</script>

<style>
.header{
    height: 60px;
    background-color:pink;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main{
    display: flex;
}
.left{
    width: 300px;
    background-color:lemonchiffon;
}
.right{
    flex: 1;
    background-color: blanchedalmond;
}
h2 span{
    margin-left: 30px;
    font-size: 20px;
    color: red;
}
</style>